<template>
  <div class="main">
    <el-button type="primary" style="margin-right:25px" @click="dialogVisible2 = true">新增单位</el-button>
    <el-input
      placeholder="单位人 / 回复"
      v-model="search"
      style="width:302px;margin-bottom:20px"
      @keyup.native.enter="searchcon('1')"
    >
      <i slot="suffix" class="el-input__icon el-icon-search" @click="searchcon('1')"></i>
    </el-input>
    <el-button type="primary" style="margin-left:25px" @click="dialogVisible4 = true">新增通知</el-button>
    <!-- 下面是表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{background:'rgba(0,104,183,1)',color:'rgba(255,255,255,1)'}"
      @selection-change="chosetable"
    >
      <el-table-column type="selection" width="100"></el-table-column>
      <el-table-column prop="department_name" label="单位"></el-table-column>
      <el-table-column prop="name" label="当前值班人"></el-table-column>
      <el-table-column prop="phone_munber" label="当前值班人员电话"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" style>
          <div style="font-size:30px">
            <i
              class="el-icon-edit"
              style="margin-right:10px;cursor:pointer;margin-right:15px;"
              @click="addmsg(scope.row)"
            ></i>
            <i
              class="el-icon-document-copy"
              style="cursor:pointer"
              @click="updatecompany(scope.row)"
            ></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:25px">
      <div class="block">
        <el-pagination
          :page-size="per_page-0"
          layout="total,  prev, pager, next, jumper"
          :total="total-0"
          :current-page="current_page-0"
          @current-change="twochange"
        ></el-pagination>
      </div>
    </div>

    <!-- 修改单位 -->
    <el-dialog
      title="修改单位"
      :visible.sync="dialogVisible"
      width="1280px"
      :el-dialog__header="{background:'rgba(0,104,183,1)',color:'rgba(255,255,255,1)'}"
    >
      <el-form
        ref="form2"
        label-width="100px"
        style="margin-left:400px"
        :model="updatedata"
        :rules="rules2"
      >
        <el-form-item label="单位名：" prop="companyname">
          <el-input style="width:300px" placeholder="请输入单位名" v-model="updatedata.companyname"></el-input>
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input style="width:300px" placeholder="请输入用户名" v-model="updatedata.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input
            style="width:300px"
            placeholder="请输入密码"
            v-model="updatedata.password"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center">注:用户名不可修改，密码输入则修改，不输入则不修改</div>
      <span slot="footer" class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="submitForm2('form2')">确 认</el-button>
          <el-button type="primary" @click="resetForm2">重 置</el-button>
        </div>
      </span>
    </el-dialog>

    <!-- 新增单位的弹出框 -->
    <el-dialog
      title="新增单位"
      :visible.sync="dialogVisible2"
      width="1280px"
      :el-dialog__header="{background:'rgba(0,104,183,1)',color:'rgba(255,255,255,1)'}"
    >
      <el-form
        ref="form1"
        label-width="100px"
        style="margin-left:400px"
        :model="adddate"
        :rules="rules1"
      >
        <el-form-item label="单位名：" prop="addcompany">
          <el-input style="width:300px" placeholder="请输入单位名" v-model="adddate.addcompany"></el-input>
        </el-form-item>
        <el-form-item label="用户名：" prop="addname">
          <el-input style="width:300px" placeholder="请输入用户名" v-model="adddate.addname"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="addpassword">
          <el-input
            style="width:300px"
            placeholder="请输入密码"
            v-model="adddate.addpassword"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;height:30px"></div>
      <span slot="footer" class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="submitForm1('form1')">确 认</el-button>
          <el-button type="primary" @click="resetForm1('form1')">重 置</el-button>
        </div>
      </span>
    </el-dialog>

    <!-- 新增通知 -->
    <el-dialog
      title="新增通知"
      :visible.sync="dialogVisible3"
      width="1280px"
      :el-dialog__header="{background:'rgba(0,104,183,1)',color:'rgba(255,255,255,1)'}"
    >
      <el-form
        ref="form3"
        label-width="120px"
        style="margin-left:300px"
        :model="addmasg"
        :rules="rules3"
      >
        <el-form-item label="单位名：">
          <span>{{companyonename}}</span>
        </el-form-item>
        <el-form-item label="通知标题：" prop="title">
          <el-input style="width:300px" placeholder="请输入本次通知的标题" v-model="addmasg.title"></el-input>
        </el-form-item>
        <el-form-item label="通知内容：" prop="content">
          <el-input type="textarea" style="width:500px;" v-model="addmasg.content"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;height:30px"></div>
      <span slot="footer" class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="submitForm3('form3')">保存</el-button>
          <el-button type="primary" @click="resetForm3('form3')">清空</el-button>
        </div>
      </span>
    </el-dialog>

    <!-- da新增通知ab -->
    <el-dialog
      title="新增通知"
      :visible.sync="dialogVisible4"
      width="1280px"
      :el-dialog__header="{background:'rgba(0,104,183,1)',color:'rgba(255,255,255,1)'}"
    >
      <el-form
        ref="form4"
        label-width="120px"
        style="margin-left:300px"
        :model="addmasgs"
        :rules="rules3"
      >
        <el-form-item label="通知标题：" prop="title">
          <el-input style="width:300px" placeholder="请输入本次通知的标题" v-model="addmasgs.title"></el-input>
        </el-form-item>
        <el-form-item label="通知内容：" prop="content">
          <el-input type="textarea" style="width:500px;" v-model="addmasgs.content"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;height:30px"></div>
      <span slot="footer" class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="submitForm4('form4')">保存</el-button>
          <el-button type="primary" @click="resetForm4">清空</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getmsg("1");
  },
  data() {
    return {
      // 新增通知的临时id
      newid: "",
      // 搜索与普通的爱情的故事
      twoboy: "1",
      search: "",
      //全部新增的布尔值
      dialogVisible4: false,
      // 单位名
      companyonename: "",
      tableData: [],
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      // 新增单位的数据绑定
      adddate: {
        addcompany: "",
        addname: "",
        addpassword: ""
      },
      // 修改单位的数据绑定
      updatedata: {
        companyname: "",
        username: "",
        password: ""
      },
      // 新增通知的数据绑定
      addmasg: {
        title: "",
        content: ""
      },
      addmasgs: {
        title: "",
        content: ""
      },
      // 新增通知的数组
      arrs: [],
      // 新增的规则
      rules1: {
        addcompany: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        addname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        addpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ]
      },
      //修改的规则
      rules2: {
        companyname: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ]
      },
      // 新增通知的规则
      rules3: {
        title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入通知内容", trigger: "blur" }
        ]
      },
      // 消息总条数
      total: "0",
      // 每页多少条
      per_page: "0",
      // 当前多少页
      current_page: "1"
    };
  },

  methods: {
    // 一开始请求数据
    async getmsg(page) {
      this.twoboy = 1;
      let msg = await this.$http.get("Admin/getAllUnit?page=" + page);
      this.tableData = msg.data.data.data;
      this.current_page = msg.data.data.current_page;
      this.total = msg.data.data.total;
      this.per_page = msg.data.data.per_page;
    },
    //添加通知
    addmsg(row) {
      this.dialogVisible3 = true;
      this.companyonename = row.department_name;
      console.log(row);
      let id = row.id;
      this.newid = id;
    },
    // 修改单位数据
    updatecompany(row) {
      this.dialogVisible = true;
      console.log(row);
      this.newid = row.id;
      this.updatedata.companyname = row.department_name;
      this.updatedata.username = row.name;
    },
    // 搜索的函数
    async searchcon(page) {
      let con = this.search.trim();
      if (con == "") {
        this.getmsg("1");
      } else {
        let msg = await this.$http.post("Admin/searchUnit?page=" + page, {
          department_name: con
        });
        // console.log(msg.data.data);
        if (msg.data.data.data.length == 0) {
          this.$message.error("无搜素内容");
        } else {
          this.twoboy = 2;
          this.tableData = msg.data.data.data;
          this.current_page = msg.data.data.current_page;
          this.total = msg.data.data.total;
          this.per_page = msg.data.data.per_page;
        }
      }
    },
    // 新增的重置函数
    resetForm1(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改的重置函数
    resetForm2() {
      this.updatedata.companyname = "";
      this.updatedata.username = "";
      this.updatedata.password = "";
    },
    // 新增通知的重置函数
    resetForm3(formName) {
      this.$refs[formName].resetFields();
    },
    // 新增通知们的清空
    resetForm4() {
      (this.addmasgs.title = ""), (this.addmasgs.content = "");
    },
    // 新增验证
    submitForm1(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let msg = await this.$http.post("Admin/addUnit", {
            department_name: this.adddate.addcompany,
            user_name: this.adddate.addname,
            passwd: this.adddate.addpassword
          }).catch(err => {
            this.$message({
              dangerouslyUseHTMLString: true,
              showClose: true,
              message: err.response.data.data.join('<br><br>'),
              type: 'error'
            });
          });
          console.log(msg.data.msg);
          if (msg.data.msg == "添加单位成功") {
            this.dialogVisible2 = false;
            this.$message.success("添加成功！");
            this.resetForm1("form1");
          }
        } else {
          this.$message.error("表单验证失败！");
        }
      });
    },
    //新增通知的验证
    submitForm3(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let msg = await this.$http.post(
            "Admin/addNotification/" + this.newid,
            {
              title: this.addmasg.title,
              content: this.addmasg.content
            }
          );
          console.log(msg);
          if (msg.data.msg == "添加通知成功") {
            this.$message.success("添加成功！");
            this.dialogVisible3 = false;
            this.resetForm3("form3");
          } else {
            this.$message.error("添加失败！");
          }
        } else {
          this.$message.error("表单验证失败！");
        }
      });
    },
    //新增通知们的验证
    submitForm4(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.arrs.length == 0) {
            this.$message.error("请选择至少一个单位！");
            return 0;
          }else{
            let msg = await this.$http.post("Admin/addNotice",{
              title:this.addmasgs.title,
              contents:this.addmasgs.content,
              id:this.arrs
            }).catch(err => {
            this.$message({
              dangerouslyUseHTMLString: true,
              showClose: true,
              message: err.response.data.data.join('<br><br>'),
              type: 'error'
            });
          });
              console.log(msg);
              if(msg.data.msg=="新增成功!"){
                  this.$message.success('新增成功！')
                  this.dialogVisible4 = false;
                  this.resetForm4();
              }else{
                this.$message.error("新增失败！")
              }
          }
        
         
        } else {
          this.$message.error("表单验证失败！");
        }
      });
    },
    //修改的验证
    submitForm2(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (
            this.updatedata.password.length == 0 ||
            (this.updatedata.password.length >= 6 &&
              this.updatedata.password.length <= 16)
          ) {
            var msg;
            if (this.updatedata.password.length == 0) {
              msg = await this.$http.post("Admin/updateUnit/" + this.newid, {
                department_name: this.updatedata.companyname
              });
            } else {
              msg = await this.$http.post("Admin/updateUnit/" + this.newid, {
                department_name: this.updatedata.companyname,
                passwd: this.updatedata.password
              });
            }
            console.log(msg);
            if (msg.data.msg == "更新单位成功") {
              this.$message.success("更新成功！");
              this.dialogVisible = false;
              this.resetForm2();
            } else {
              this.$message.error("更新失败！");
            }
          } else {
            this.$message.error("密码长度为6到16位！");
          }
        } else {
          this.$message.error("表单验证失败！");
        }
      });
    },
    // 换页的函数
    twochange(val) {
      if (this.twoboy == 1) {
        this.getmsg(val);
      } else {
        this.searchcon(val);
      }
    },
    // 选择表格的函数
    chosetable(row) {
      let arrs = [];
      for (let i = 0; i < row.length; i++) {
        arrs.push(row[i].id);
      }
      this.arrs = arrs;
    }
  }
};
</script>


<style scoped>
.main {
  min-height: 260px;
  width: 1280px;
  margin: 20px auto 0;
}
.sp {
  font-size: 16px;
  background-color: #ccc;
  padding: 5px 14px;
  border-radius: 10px;
}
</style>